<template>
  <div class="user-header">
    <h3 class="user-title">用户列表</h3>
    <el-button type="primary" @click="handleAddUserClick">新增用户</el-button>
    <user-add-form :isVisible="isVisible" @update:isVisible="updateVisible"/>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import UserAddForm from "@/views/main/system/user/c-cpns/user-add-modal.vue";

const isVisible = ref(false)
const handleAddUserClick = () => {
  isVisible.value = true
}
const updateVisible = (newVisible: boolean) => {
  isVisible.value = newVisible
}
</script>

<style lang="less" scoped>
.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 0 10px;

  .user-title {
    font-size: 24px;
  }
}
</style>
